<template>
  <div class="app-container">
    <div class="orderStatsDataShow">
      <div class="orderStatsDataShowChild">
        <span>{{ stats.orderTotal }}</span>
        <div class="describe">
          <span>订单总数</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">订单总数仅包含店铺订单、活动支付订单，其中无需支付的仅提供信息的报名活动不在此展示。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div class="orderStatsDataShowChild">
        <span>{{ stats.orderTotal }}</span>
        <div class="describe">
          <span>活动订单</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">仅包含活动产生的订单，活动中无需支付仅需提供信息的报名活动不再此展示。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div class="orderStatsDataShowChild">
        <span>0</span>
        <div class="describe">
          <span>店铺订单</span>
          <el-tooltip placement="top" popper-class="tip">
            <p slot="content">仅包含店铺商品订单，活动订单不在此统计内。</p>
            <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
          </el-tooltip>
        </div>
      </div>
      <div class="lastOrderStatsDataShowChild">
        <div class="odd">
          <span>{{ stats.statsAmountTotal }}</span>
          <div class="describe">
            <span>支付总额(元)</span>
            <el-tooltip placement="top" popper-class="tip">
              <p slot="content">店铺订单+活动订单产生的支付总额，不含已退款金额。</p>
              <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
            </el-tooltip>
          </div>
        </div>
        <div class="even">
          <span>-</span>
        </div>
        <div class="odd">
          <span>{{ stats.statsDeductTotalAmount }}</span>
          <div class="describe">
            <span>佣金+返利+员工奖励+微信实收手续费总额(元)</span>
            <el-tooltip placement="top" popper-class="tip">
              <p slot="content">佣金：活动及商品开启分销后，向分销用户发放的奖励金额。返利：活动开启下单返利后，向下单用户返还的奖励金额。 员工奖励：活动开启员工奖励后，向分享的员工发放的奖励金额。 手续费：微信规定每笔支付需收取交易手续费，此费用由微信收取。</p>
              <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
            </el-tooltip>
          </div>
        </div>
        <div class="even">
          <span>=</span>
        </div>
        <div class="odd">
<!--          <span>{{ (Number(stats.statsAmountTotal) - Number(stats.statsDeductTotalAmount)) | numFilter }}</span>-->
          <span>{{ stats.withdrawableAmount }}</span>
          <div class="describe">
            <span>实收总额(元)</span>
            <el-tooltip placement="top" popper-class="tip">
              <p slot="content">商家可提现收入总额。</p>
              <svg viewBox="64 64 896 896" data-icon="question-circle" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path></svg>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="信息偏好:" prop="infoPreference">
        <el-select v-model="infoPreference" placeholder="请选择">
          <el-option
            v-for="dict in dict.type.info_preference"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号:" prop="orderNo">
        <el-input
          v-model="queryParams.orderNo"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="微信信息:" prop="wxKeyword">
        <el-input
          v-model="queryParams.wxKeyword"
          placeholder="请输入微信id或昵称"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="下单信息:" prop="enrollKeyword">
        <el-input
          v-model="queryParams.enrollKeyword"
          placeholder="请输入下单姓名或手机号"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="商品名称:" prop="goodsName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入商品名称"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="订单来源:" prop="orderSource">
        <el-select v-model="queryParams.orderSource" placeholder="请选择" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.order_source"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择活动:" prop="activityId">
        <ActivitySelector
          style="width: 300px"
          placeholder="请选择活动"
          v-model="queryParams.activityId"
          retrun-type="string"
          :not-show-all-option="true"
          clearable
          @change="handleQuery"
        />
      </el-form-item>
      <el-form-item v-if="infoPreference === 'simplify_info'" label="订单状态:" prop="orderStatus">
        <el-select v-model="queryParams.orderStatus" placeholder="请选择" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.order_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="infoPreference === 'simplify_info'" label="资金状态:" prop="fundStatus">
        <el-select v-model="queryParams.fundStatus" placeholder="请选择" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.fund_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="infoPreference === 'simplify_info'" label="拼团情况:" prop="splicingType">
        <el-select v-model="queryParams.splicingType" placeholder="请选择" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.splicing_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="infoPreference === 'simplify_info'" label="分销情况:" prop="distributionType">
        <el-select v-model="queryParams.distributionType" placeholder="请选择" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.distribution_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="infoPreference === 'simplify_info'" label="下单时间:">
        <el-date-picker
          v-model="queryParams.orderCreateTimeRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item v-if="infoPreference === 'simplify_info'" label="订单核销时间:">
        <el-date-picker
          v-model="queryParams.verificationTimeRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item v-if="infoPreference === 'distribution_info'" label="1级分销人:" prop="oneDistributionNickname">
        <el-input
          v-model="queryParams.oneDistributionNickname"
          placeholder="请输入微信昵称"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item v-if="infoPreference === 'distribution_info'" label="2级分销人:" prop="twoDistributionNickname">
        <el-input
          v-model="queryParams.twoDistributionNickname"
          placeholder="请输入微信昵称"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item v-if="infoPreference === 'splicing_info'" label="团性质:">
        <el-select v-model="queryParams.nature" placeholder="请选择" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.team_nature"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="infoPreference === 'splicing_info'" label="团长:" prop="teamLeaderNickname">
        <el-input
          v-model="queryParams.teamLeaderNickname"
          placeholder="请输入微信昵称"
          clearable
          @keyup.enter.native="handleQuery">
          <el-button circle slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item v-if="infoPreference === 'splicing_info'" label="团内身份:" prop="identity">
        <el-select v-model="queryParams.identity" placeholder="请选择" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.team_identity"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="infoPreference === 'splicing_info'" label="团状态:" prop="teamStatus">
        <el-select v-model="queryParams.teamStatus" placeholder="请选择" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.team_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收款渠道:">
        <el-select v-model="queryParams.collectionChannel" placeholder="请选择收款渠道" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.collection_channel"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收款小程序:">
        <el-select v-model="queryParams.collectionMiniApp" placeholder="请选择收款小程序" clearable @change="handleQuery">
          <el-option
            v-for="dict in dict.type.collection_mini_app"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="small"
          v-hasPermi="['system:order:refundAll']"
          @click="refundAll"
        >全部退款</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"/>
      <el-table-column label="订单编号" key="orderNo" prop="orderNo" width="130"/>
      <el-table-column label="微信信息" key="avatarUrl" width="180">
        <template slot-scope="scope">
          <div class="info-box">
            <div class="img-box">
              <img :src="scope.row.avatarUrl" alt=""/>
            </div>
            <div class="content-box">
              <div>
                {{ scope.row.nickname }}
              </div>
              <div>
                ID:{{ idDesensit(scope.row.wxUserId) }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="下单信息" key="enroll" width="110">
        <template slot-scope="scope">
          {{ scope.row.enrollName }}
          <br/>
          {{ scope.row.enrollMobile }}
        </template>
      </el-table-column>
      <el-table-column label="来源" key="activityTitle" prop="activityTitle" min-width="140">
        <template slot-scope="scope">
          <router-link :to="{path:'/index',query:{id: scope.row.activityId,title: scope.row.activityTitle}}" class="link-type">
            {{ scope.row.activityTitle }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" key="welfareName" prop="welfareName" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.welfareName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="" label="商品数量" key="groupPurchaseGoodsNumber" prop="groupPurchaseGoodsNumber" width="100"/>
      <el-table-column label="支付金额（元）" key="amountTotal" prop="amountTotal" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.amountTotal">{{ scope.row.amountTotal }}元</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference !== 'distribution_info'" label="收款渠道" key="collectionChannel" prop="collectionChannel" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.collection_channel" :value="scope.row.collectionChannel"/>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference !== 'distribution_info'" label="收款小程序" key="collectionMiniApp" prop="collectionMiniApp" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.collection_mini_app" :value="scope.row.collectionMiniApp"/>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'simplify_info'" label="扣除金额" key="deduct" width="100">
        <template slot-scope="scope">
          <el-tooltip placement="top" popper-class="deduct">
            <div slot="content">
              <p>详细数据</p>
              <p>佣金：{{ (Number(scope.row.oneDistributionAmount) + Number(scope.row.twoDistributionAmount)) | numFilter }}元</p>
<!--              <p>微信实收手续：{{ scope.row.commission }}元</p>-->
              <p>微信实收手续：{{ scope.row.amountTotal * 10/1000 }}元</p>
            </div>
            <span>{{ ((Number(scope.row.amountTotal) * 10/1000) + Number(scope.row.oneDistributionAmount) + Number(scope.row.twoDistributionAmount)) | numFilter }}元</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'simplify_info'" label="实收" key="actualAmount" prop="actualAmount" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.actualAmount">{{ scope.row.actualAmount }}元</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'simplify_info'" label="订单状态" key="status" prop="status" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_type" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'simplify_info'" label="下单时间" key="createTime" prop="createTime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'simplify_info'" label="核销人" key="verificationName" prop="verificationName" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.verificationName">{{ scope.row.verificationName }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'simplify_info'" label="订单核销时间" key="verificationTime" prop="verificationTime" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.verificationTime">{{ parseTime(scope.row.verificationTime) }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'simplify_info'" label="分销金额" key="distributionAmount" width="150">
        <template slot-scope="scope">
          <div v-if="(scope.row.oneDistributionAmount && scope.row.twoDistributionAmount > 0) ||
            (scope.row.twoDistributionAmount && scope.row.twoDistributionAmount > 0)">
            <div v-if="scope.row.oneDistributionAmount && scope.row.twoDistributionAmount > 0" class="distributionAmount">
              <span class="distribution-title">
                一级分销：{{ scope.row.oneDistributionAmount }}元
              </span>
              <span class="distribution-img">
                <img v-if="scope.row.oneDistributionAvatarUrl" :src="scope.row.oneDistributionAvatarUrl" alt=""/>
                <img v-else src="../../../assets/logo/sjd_new_logo_a.jpg" alt=""/>
              </span>
              <span class="distribution-name">
                <span v-if="scope.row.oneDistributionNickname">{{ scope.row.oneDistributionNickname }}</span>
                <span v-else>微信用户</span>
              </span>
            </div>
            <div v-if="scope.row.twoDistributionAmount && scope.row.twoDistributionAmount > 0" class="distributionAmount">
              <span class="distribution-title">
                二级分销：{{ scope.row.twoDistributionAmount }}元
              </span>
              <span class="distribution-img">
                <img v-if="scope.row.twoDistributionAvatarUrl" :src="scope.row.twoDistributionAvatarUrl" alt=""/>
                <img v-else src="../../../assets/logo/sjd_new_logo_a.jpg" alt=""/>
              </span>
              <span class="distribution-name">
                <span v-if="scope.row.twoDistributionNickname">{{ scope.row.twoDistributionNickname }}</span>
                <span v-else>微信用户</span>
              </span>
            </div>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'distribution_info'" label="1级分销人" key="oneDistributionNickname" prop="oneDistributionNickname" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.oneDistributionNickname">{{ scope.row.oneDistributionNickname }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'distribution_info'" label="1级分销佣金" key="oneDistributionAmount" prop="oneDistributionAmount" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.oneDistributionAmount">{{ scope.row.oneDistributionAmount }}元</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'distribution_info'" label="1级佣金发放方式" key="oneMoneyGrantType" prop="oneMoneyGrantType" width="100"/>
      <el-table-column v-if="infoPreference === 'distribution_info'" label="2级分销人" key="twoDistributionNickname" prop="twoDistributionNickname" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.twoDistributionNickname">{{ scope.row.twoDistributionNickname }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'distribution_info'" label="2级分销佣金" key="twoDistributionAmount" prop="twoDistributionAmount" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.twoDistributionAmount">{{ scope.row.twoDistributionAmount }}元</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'distribution_info'" label="2级佣金发放方式" key="twoMoneyGrantType" prop="twoMoneyGrantType" width="100"/>
      <el-table-column v-if="infoPreference === 'splicing_info'" label="团性质" key="nature" prop="nature" width="150">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.team_nature" :value="scope.row.nature"/>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'splicing_info'" label="团长" key="leaderName" prop="leaderName" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.leaderName">{{ scope.row.leaderName }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'splicing_info'" label="团内身份" key="identity" prop="identity" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.team_identity" :value="scope.row.identity"/>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'splicing_info'" label="参团人数" key="personnelNumber" prop="personnelNumber" width="100"/>
      <el-table-column v-if="infoPreference === 'splicing_info'" label="成团人数" key="constituteNumber" prop="constituteNumber" width="100"/>
      <el-table-column v-if="infoPreference === 'splicing_info'" label="满团人数" key="overflowNumber" prop="overflowNumber" width="100"/>
      <el-table-column v-if="infoPreference === 'splicing_info'" label="拼团金额" key="price" prop="price" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.price">当前{{ scope.row.price }}元</div>
          <div v-if="scope.row.price">{{ scope.row.price }} - {{ scope.row.price }}元
            <el-popover
              placement="bottom"
              width="200"
              trigger="hover">
              <ul v-for="item in scope.row.goodsItemList" :key="item.id">
                <li>
                  <div>
                    <el-tag v-if="scope.row.groupPurchaseGoodsItemId == item.id" effect="dark" size="mini">当前</el-tag>
                    <p v-else><br/></p>
                  </div>
                  <p>{{ item.constituteNumber }}人</p>
                  <p>{{ scope.row.price }}元</p>
                  <p>{{ item.welfareName }}</p>
                </li>
              </ul>
              <el-button slot="reference" type="text">详细</el-button>
            </el-popover>

          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column v-if="infoPreference === 'splicing_info'" label="团状态" key="groupPurchaseStatus" prop="groupPurchaseStatus" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.team_status" :value="scope.row.groupPurchaseStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding fixed-width" fixed="right" min-width="200">
        <template slot-scope="scope">
          <el-button type="text">
            <router-link :to="'/order/detail/index/' + scope.row.id" class="link-type">
              详情
            </router-link>
          </el-button>
          <el-button v-if="scope.row.status == 2" type="text" @click="goVerification(scope.row.id)">核销</el-button>
          <el-button v-if="scope.row.status == 2 || scope.row.status == 5" type="text" @click="refund(scope.row)" v-hasPermi="['system:order:refund']">退款</el-button>
          <el-dropdown v-if="infoPreference === 'splicing_info'" @command="(command) => handleCommand(command, scope.row)">
            <el-button type="text">
              更多<i class="el-icon-arrow-down"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleResetPwd">升为团长</el-dropdown-item>
              <el-dropdown-item command="handleAuthRole">独立成团</el-dropdown-item>
              <el-dropdown-item command="handleAuthRole">移团</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog title="核销" :visible.sync="verificationOpen" width="400px">
      <el-input v-model="verificationCode" placeholder="请输入核销码"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="submitVerification">确 定</el-button>
        <el-button size="mini" @click="verificationOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dataStats,pageList,orderVerification,refund,batchRefund } from "@/api/triones/order";
import ActivitySelector from "@/components/yjj/ActivitySelector";
export default {
  name: "index",
  components: { ActivitySelector },
  dicts: ['info_preference','order_source','order_type','fund_status',
    'splicing_type','distribution_type','collection_channel',
    'collection_mini_app','team_nature','team_identity','team_status'],
  data() {
    return {
      showSearch: true,
      loading: false,
      ids: [],
      single: true,
      multiple: true,
      stats: {
        orderTotal: 0,
        statsAmountTotal: 0,
        statsDeductTotalAmount: 0,
        withdrawableAmount: 0
      },
      infoPreference: 'simplify_info',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: undefined,
        wxKeyword: undefined,
        enrollKeyword: undefined,
        goodsName: undefined,
        orderSource: '1',
        activityId: undefined,
        orderStatus: undefined,
        fundStatus: undefined,
        splicingType: undefined,
        distributionType: undefined,
        orderCreateTimeRange: [],
        verificationTimeRange: [],
        collectionChannel: undefined,
        collectionMiniApp: undefined,
        oneDistributionNickname: undefined,
        twoDistributionNickname: undefined,
        nature: undefined,
        teamLeaderNickname: undefined,
        identity: undefined,

      },
      dataList: [],
      total: 0,
      verificationOpen: false,
      verificationCode: undefined,
      verificationOrderId: undefined
    }
  },
  filters: {
    numFilter (value) {
      let realVal = parseFloat(value).toFixed(2)
      return realVal
    }
  },
  created() {
    this.getStats();
    this.getList();
  },
  methods: {
    /** 订单统计 */
    getStats() {
      dataStats().then(response => {
        this.stats = response.data;
      })
    },
    /** 获取订单列表 */
    getList() {
      this.loading = true;
      pageList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    /** 检索 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 多选 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 全部退款 */
    refundAll() {
      const ids = this.ids;
      if (ids.length <= 0) {
        return this.$message.error("请选择要退款的订单");
      }
      this.$modal.confirm('是否确认批量退款？').then(() => {
        batchRefund(ids).then((response) => {
          this.$modal.msgSuccess("操作成功");
          this.getList();
          this.ids = [];
        });
      })
    },
    /** 退款 */
    refund(row) {
      const orderId = row.id;
      this.$modal.confirm('是否确认退款？').then(function() {
        return refund(orderId);
      }).then(() => {
        this.getStats();
        this.getList();
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },
    handleCommand(command, row) {
      switch (command) {
        case "memberSource":
          break;
        case "editEnroll":
          break;
        case "upgrade":
          this.goUpgrade(row);
          break;
        case "reduce":
          this.goReduce(row);
          break;
        case "isolate":
          this.goIsolate(row);
          break;
        case "remove":
          this.goRemoveTeam(row);
          break;
        case "refund":
          break;
        default:
          break;
      }
    },
    /** 去核销 */
    goVerification(id) {
      this.verificationOrderId = id;
      this.verificationCode = undefined;
      this.verificationOpen = true;
    },
    /** 核销提交 */
    submitVerification() {
      if (!this.verificationCode) {
        return this.$message.error('核销码不能为空');
      }
      const params = {
        id: this.verificationOrderId,
        verificationCode: this.verificationCode
      }
      orderVerification(params).then(response => {
        this.verificationOpen = false;
        this.$message.success("核销成功");
        this.getList();
      })
    },
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog__body {
  padding: 10px 10px;
}

.orderStatsDataShow {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  .orderStatsDataShowChild {
    background-color: #fafafa;
    width: 200px;
    height: 70px;
    text-align: center;
    align-content: center;
  }
  .lastOrderStatsDataShowChild {
    background-color: #fafafa;
    width: 640px;
    height: 70px;
    display: flex;
    text-align: center;
    > div{
      align-content: center;
    }
    .even {
      width: 5%;
    }
    .odd {
      width: 30%;
      padding: 0 10px;
    }
  }
}
.describe {
  span {
    font-size: 14px;
    vertical-align : middle;
  }
  svg {
    margin-left: 5px;
    vertical-align : middle;
    width: 12px;
  }
}

.tip {
  p {
    min-width: 50px;
    max-width: 200px;
    min-height: 10px;
    font-size: 14px;
    margin: 0px;
  }
}

.deduct{
  p{
    min-width: 70px;
    font-size: 14px;
    margin: 10px 0px;
  }
}

.distributionAmount {
  font-size: 14px;
  line-height: 14px;
  margin-bottom: 5px;
  .distribution-title {
    vertical-align: middle;
  }
  .distribution-img {
    vertical-align: middle;
    padding: 0 5px;
  }
  .distribution-name {
    vertical-align: middle;
  }
  img {
    height: 25px;
    width: 25px;
    overflow: hidden;
    border-radius: 50%;
  }
}

</style>
